import React, { Component } from 'react';
import { Card, Icon, Table, Grid, Container, Button, Input, Dropdown, Menu, Header } from 'semantic-ui-react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import * as actions from '../actions'
import { DateInput } from 'semantic-ui-calendar-react';
import MessageDiv from '../components/Message';
import TableButtonGroup from '../components/TableButtonGroup';

const moment = require('moment');
const mapStateToProps = state => state['actionReport']['actionItemReport'];

const mapDispatchToProps = dispatch => ({
  showActionItemEditRow: (action, data) => dispatch(actions.actionItem_ShowEditPanel(true)),
  hideActionItemEditRow: (action, data) => dispatch(actions.actionItem_ShowEditPanel(false)),
  formSubmit: (action, data) => dispatch(actions.actionItem_FormSubmit()),
  formChange: (action, data) => {
    /* attr:title is required for inputs*/
    let formData = {};
    formData[data.title] = data.value;
    dispatch(actions.actionItem_FormChange(formData));
  },
  loadActionItems: (action, data) => {
    let pageIndex = (!!data && !!data.pageIndex) ? data.pageIndex : 0;
    dispatch(actions.actionItem_fetchActionItems(pageIndex))
  },
  loadActionItem: (action, data) => {
    let id = (action.target.dataset.id) ? action.target.dataset.id : -1;
    dispatch(actions.actionItem_loadActionItem(id))
  },
})

const options = [
  { key: 1, text: 'Open', value: 'Open' },
  { key: 2, text: 'Closed', value: 'Closed' },
]

class ActionItemPanel extends Component {

  componentDidMount() {
    this.props.loadActionItems();
  }

  render() {
    return (
      <div>
        <h4 class='ui header'>
          Action Items
          <div class='sub header'>
            Server rendering pagination.
          </div>
        </h4>
        { (!!this.props.message) 
          && 
          <MessageDiv message={this.props.message}/>
        }
        <Table celled size='small' compact color='yellow' selectable>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Action Item</Table.Cell>
              <Table.Cell>Resp. Person</Table.Cell>
              <Table.Cell>Due Date</Table.Cell>
              <Table.Cell>Associated Supplier</Table.Cell>
              <Table.Cell>Status</Table.Cell>
              <Table.Cell></Table.Cell>
            </Table.Row>
            { !!this.props.data && !!this.props.data.length > 0 && this.props.data.map((elem) => {
                let tableRowProp = {};
                let tableRowStatus = (!!elem.status && elem.status == 'Closed') ? '':'negative';
                tableRowProp[tableRowStatus] = true;
                return <Table.Row key={elem.id} {...tableRowProp}>
                  <Table.Cell>{!!elem.actionItem?elem.actionItem:''}</Table.Cell>
                  <Table.Cell>{!!elem.respPerson?elem.respPerson:''}</Table.Cell>
                  <Table.Cell>{!!elem.dueDate?(moment.utc(elem.dueDate).format("YYYY-MM-DD")):''}</Table.Cell>
                  <Table.Cell>{!!elem.associatedSupplier?elem.associatedSupplier:''}</Table.Cell>
                  <Table.Cell>{!!elem.status?elem.status:''}</Table.Cell>
                  <Table.Cell><Icon disabled name='edit' link onClick={this.props.loadActionItem} data-id={elem.id}/></Table.Cell>
                </Table.Row>;
              })
            }
            { !this.props.data || !!this.props.data && this.props.data.length == 0 
              &&
              <Table.Row key="0">
                <Table.Cell colSpan="5">
                  No Data
                </Table.Cell>
              </Table.Row>
            }
            { 
              (this.props.formData.actionItemForm.status == 'edit') 
                &&
              <Table.Row>
                <Table.Cell>
                  <Input fluid size='mini' value={this.props.formData.actionItemForm.data.actionItem} title='actionItem' placeholder='Action Item' onChange={this.props.formChange}/>
                </Table.Cell>
                <Table.Cell>
                  <Input fluid size='mini' value={this.props.formData.actionItemForm.data.respPerson} title='respPerson' placeholder='Resp. Person' onChange={this.props.formChange}/>
                </Table.Cell>
                <Table.Cell>
                  <DateInput
                    title='dueDate'
                    fluid
                    dateFormat='YYYY-MM-DD'
                    size='mini'
                    value={this.props.formData.actionItemForm.data.dueDate}
                    placeholder='Due Date'
                    onChange={this.props.formChange} />
                </Table.Cell>
                <Table.Cell>
                  <Input fluid size='mini' value={this.props.formData.actionItemForm.data.associatedSupplier} title='associatedSupplier' placeholder='Associated Supplier' onChange={this.props.formChange}/>
                </Table.Cell>
                <Table.Cell>
                  <Dropdown size='mini' value={this.props.formData.actionItemForm.data.status} placeholder='Select Status' title='status' options={options} item onChange={this.props.formChange}/>
                </Table.Cell>
                <Table.Cell>
                </Table.Cell>
              </Table.Row>
            }

          </Table.Body>
          <Table.Footer fullWidth>
            <Table.Row>
              <Table.HeaderCell colSpan='6'>
                { 
                  (this.props.formData.actionItemForm.status != 'edit') 
                   &&
                  <TableButtonGroup 
                    pageIndex={this.props.pageIndex} 
                    pageLength={this.props.pageLength} 
                    dataCount={this.props.dataCount} 
                    buttonOnClick={this.props.loadActionItems}/>
                }
                { 
                  (this.props.formData.actionItemForm.status != 'edit') 
                   &&
                  <Button floated='right' icon labelPosition='left' primary size='mini' onClick={this.props.showActionItemEditRow}>
                    <Icon name='edit'/> Add Action Item
                  </Button>
                }
                { 
                  (this.props.formData.actionItemForm.status == 'edit') 
                    &&
                  <Button floated='right' size='mini' onClick={this.props.hideActionItemEditRow}>
                    Back
                  </Button>
                }
                { 
                  (this.props.formData.actionItemForm.status == 'edit') 
                    &&
                  <Button floated='right' size='mini' positive onClick={this.props.formSubmit}>
                    Submit
                  </Button>
                }
              </Table.HeaderCell>
            </Table.Row>
          </Table.Footer>
        </Table>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ActionItemPanel);
